<template>
    <div class="p-2">
        <div class="title-item">检验报告</div>
        <div>
            <el-table :data="tableData" height="300">
                <el-table-column prop="reportNo" label="报告编号" width="200" align="center" />
                <el-table-column prop="sampleNo" label="样品编号" width="200" align="center" />
                <el-table-column prop="inspectionItem" label="检验项目" width="200" align="center" />
                <el-table-column prop="reportDate" label="报告生成日期" width="200" align="center" />
                <el-table-column prop="status" label="报告状态" width="200" align="center">
                    <template #default="scope">
                        <el-tag :type="statusTypeMap[scope.row.status]">
                            {{ scope.row.status }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="operation" label="操作" width="200" align="center">
                    <template #default>
                        <el-button size="small" type="primary" text>查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            statusTypeMap: {
                '已完成': 'success',
                '审核中': 'warning',
                '未生成': 'info',
                '已驳回': 'danger'
            },
            // 整理后的表格数据（与表头字段对应）
            tableData: [
                {
                    reportNo: 'REP2023001',     
                    sampleNo: 'SAM2023001',      
                    inspectionItem: '水质重金属检测',
                    reportDate: '2023-05-03',   
                    status: '已完成'           
                },
                {
                    reportNo: 'REP2023002',
                    sampleNo: 'SAM2023002',
                    inspectionItem: '空气污染物检测',
                    reportDate: '2023-05-02',
                    status: '审核中'
                },
                {
                    reportNo: 'REP2023003',
                    sampleNo: 'SAM2023003',
                    inspectionItem: '土壤pH值检测',
                    reportDate: '2023-05-04',
                    status: '未生成'
                },
                {
                    reportNo: 'REP2023004',
                    sampleNo: 'SAM2023004',
                    inspectionItem: '食品微生物检测',
                    reportDate: '2023-05-01',
                    status: '已驳回'
                },
                {
                    reportNo: 'REP2023005',
                    sampleNo: 'SAM2023005',
                    inspectionItem: '水质重金属检测',
                    reportDate: '2023-05-08',
                    status: '已完成'
                },
                {
                    reportNo: 'REP2023006',
                    sampleNo: 'SAM2023006',
                    inspectionItem: '化妆品成分分析',
                    reportDate: '2023-05-03',
                    status: '审核中'
                },
                {
                    reportNo: 'REP2023007',
                    sampleNo: 'SAM2023007',
                    inspectionItem: '空气污染物检测',
                    reportDate: '2023-05-02',
                    status: '已完成'
                },
                  {
                    reportNo: 'REP2023003',
                    sampleNo: 'SAM2023003',
                    inspectionItem: '土壤pH值检测',
                    reportDate: '2023-05-04',
                    status: '未生成'
                },
                {
                    reportNo: 'REP2023004',
                    sampleNo: 'SAM2023004',
                    inspectionItem: '食品微生物检测',
                    reportDate: '2023-05-01',
                    status: '已驳回'
                },
                {
                    reportNo: 'REP2023005',
                    sampleNo: 'SAM2023005',
                    inspectionItem: '水质重金属检测',
                    reportDate: '2023-05-08',
                    status: '已完成'
                },
                {
                    reportNo: 'REP2023006',
                    sampleNo: 'SAM2023006',
                    inspectionItem: '化妆品成分分析',
                    reportDate: '2023-05-03',
                    status: '审核中'
                },
                {
                    reportNo: 'REP2023007',
                    sampleNo: 'SAM2023007',
                    inspectionItem: '空气污染物检测',
                    reportDate: '2023-05-02',
                    status: '已完成'
                }
            ]
        }
    },
    computed: {

    },
    mounted() {

    }
}
</script>




<style scoped lang="scss">
.title-item {
    font-size: 14px;
    color: #666;
    margin: 10px;
    margin-top: 20px;

}
</style>